<%@ page import="cn.edu.tsc.pojo.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE >
<html>

<head>
    <%--   <%@ include file="/page/common/head.jsp" %> --%>
    <title>Insert title here</title>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>

    <!-- 引入 Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">

    <!-- 引入 Bootstrap 的 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>

</head>

<body>

<%
    User user = (User) session.getAttribute("user");
%>

<h3 style="color: blue">您好 , <%=user.getName()%> , 欢迎使用本系统！！
    <button class="btn btn-primary" onclick="LogoutServlet()">注销</button>
</h3>
<hr>
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>EMP-CRUD</h1>
        </div>
    </div>

    <!-- 搜索框 -->
    <div class="row">
        <div class="col-md-6">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="searchBox" placeholder="Search" aria-label="Search"
                       aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"
                            id="basic-addon2" onclick="submitSearch()">搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
                添加
            </button>
        </div>
    </div>
    <!-- 显示数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table table-striped">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>工资</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${listEmp }" var="emp">
                    <tr>
                        <td>${emp.id }</td>
                        <td>${emp.name }</td>
                        <td>${emp.depart }</td>
                        <td>${emp.salary }</td>
                        <td>
                            <a class="btn btn-primary btn-sm" href="PreUpdateEmp?id=${emp.id}">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                            </a>

                            <a class="btn btn-danger btn-sm" id="del" href="javascript:deleteByID(${emp.id})">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>

                                删除
                            </a>

                        </td>
                    </tr>
                </c:forEach>
            </table>

        </div>
    </div>
    <!--  结束-->
</div>


<!-- 员工添加的模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加员工</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="AddEmpServlet" method="post">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">* 姓 名:</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control"
                                   id="emp_name" placeholder="empName">
                        </div>
                    </div>

                    <br>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">* 部 门:</label>
                        <div class="col-sm-10">
                            <select class="form-select" aria-label="Default select example" name="depart">
                                <option selected>请选择一个选项</option>
                                <option value="开发">开发</option>
                                <option value="财务">财务</option>
                                <option value="人事">人事</option>
                            </select>
                        </div>
                    </div>

                    <br>
                    <div class="form-group">
                        <label for="inputPassword4" class="col-sm-2 control-label">* 工 资:</label>
                        <div class="col-sm-10">
                            <input type="text" name="salary" name="salary"
                                   class="form-control" id="emp_salary" placeholder="salary">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">添加</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
</html>

<script type="text/javascript">
    function deleteByID(sno) {
        var flag = window.confirm("确定删除?")
        if (flag)
            location.href = "DeleteEmpById?id=" + sno;
    }


    var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
        keyboard: false
    })

    function LogoutServlet() {
        var flag = window.confirm("确定退出？")
        if (flag)
            location.href = "LogoutServlet";
    }

    function submitSearch() {
        var searchValue = document.getElementById("searchBox").value;
        window.location.href = "SearchServlet?search=" + searchValue;
    }

</script>

